<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    {% include 'component/static_resource_css.html' %}
    <style>
        .main .container {
            width: 720px;
        }

        .text-info {
            color: #ff6a46 !important;
        }

        .btn-info {
            color: #fff;
            background-color: #ff6a46 !important;
            border-color: #ff6a46 !important;
        }

    </style>
</head>
<body>

<div class="nk-container">
    {% include "component/header.html" %}

    {# 页面内容 #}
    <div class="main">
        <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
            <h3 class="text-center text-info border-bottom pb-3">注&nbsp;&nbsp;册</h3>
            <form class="mt-5" method="post" action="/register" role="form">
                <div class="form-group row">
                    <label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
                    <div class="col-sm-10">
                        <input type="text" id="username"
                               class="{{ "form-control " +('is-invalid' if userMsg['usernameMsg'] else '') }}"
                               value="{{ user.username if user != None else '' }}"
                               name="username" placeholder="请输入您的账号!" required>
                        <!--错误提示消息, 当 上面的 input class = is-invalid 时显示-->
                        <div class="invalid-feedback">{{ userMsg['usernameMsg'] }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
                    <div class="col-sm-10">
                        <input type="password" id="password"
                               class="{{ "form-control " +('is-invalid' if userMsg['passwordMsg'] else '') }}"
                               value="{{ user.password if user != None else '' }}"
                               name="password" placeholder="请输入您的密码!" required>
                        <!--错误提示消息-->
                        <div class="invalid-feedback">{{ userMsg['passwordMsg'] }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="confirm-password"
                               placeholder="请再次输入密码!" required>
                        <div class="invalid-feedback" id="confirm-password-msg">
                        </div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="email" class="col-sm-2 col-form-label text-right">邮箱:</label>
                    <div class="col-sm-10">
                        <input type="email" id="email"
                               class="{{ "form-control " +('is-invalid' if userMsg['emailMsg'] else '') }}"
                               value="{{ user.email if user != None else '' }}"
                               name="email" placeholder="请输入您的邮箱!" required>
                        <!--错误提示消息-->
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10 text-center">
                        <button type="submit" class="btn btn-info text-white form-control">立即注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="container" style="padding-bottom: 180px"></div>
    {% include "component/footer.html" %}
</div>

{% include "component/static_resource_js.html" %}
<script>
    $(document).ready(function () {
        $("form").submit(check_data);
        $("input").focus(clear_error);
        function check_data() {
            var pwd1 = $("#password").val();
            var pwd2 = $("#confirm-password").val();
            if (pwd1 != pwd2) {
                $("#confirm-password").addClass("is-invalid");
                $("#confirm-password-msg").innerText = "两次输入密码不一致"
                return false;
            }
            return true;
        }
        function clear_error() {
            $(this).removeClass("is-invalid");
        }
    })


</script>

</body>
</html>